import React from 'react'
import { Transfer, Space, Image, message } from 'antd';
import { getNavlist } from './../../api/nav'

class HomeList extends React.Component {
  state = {
    navlist: [],
    targetKeys: [],
    selectedKeys: []
  };
  async componentDidMount () {
    const res = await getNavlist()
    this.setState({
      navlist: res.data.data,

    })
  }
  // 点击左右箭头时的事件
  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys });
    // 此时可以吧  nextTargetKeys 的数据传输到后端
    // 后端遍历解析 navid 组成的数组，得到相应的数据
    // 插入数据库
    
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    // 最多选择10条
    if (sourceSelectedKeys.length > 10 - this.state.targetKeys.length) {
      message.error('最多选择10项数据')
    } else {
      // 表示当前的数据被选中
      this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
    }


  };


  render() {
    const { targetKeys, selectedKeys, disabled, navlist } = this.state;
    return (
      <>
        <Transfer
          dataSource={navlist}
          titles={['所有导航', '选中导航']}
          rowKey={record => record.navid}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={this.handleChange}
          onSelectChange={this.handleSelectChange}
          listStyle={{
            width: '40%',
            height: '600px',
          }}
          render={item => (
            <Space>
              <Image src={ item.icon } width={20} height={20}/>
              <span>{ item.name }</span>
            </Space>
          )}
          disabled={disabled}
          style={{ marginBottom: 16 }}
        />
      </>
    );
  }
}

export default HomeList